<template>
  <el-dialog
    :visible.sync="visible"
    title="添加表单项"
    width="500"
    align-center
    style="z-index: 20000006 !important;"
  >
    <!-- 自定义表单编辑 -->
    <el-form ref="formDateRef" :model="formDate" :rules="formDateRules" label-position="top">
      <el-form-item label="表单项名称" prop="name">
        <el-input v-model="formDate.name"></el-input>
      </el-form-item>
      <el-form-item label="表单项类型" prop="type">
        <el-radio-group v-model="formDate.type">
          <el-radio :label="0">文本框</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否必填" prop="required">
        <el-radio-group v-model="formDate.required">
          <el-radio :label="false">是</el-radio>
          <el-radio :label="true">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="addOrUpdate">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      list: [],
      formDate: {
        name: '',
        type: 0,
        required: true,
        value: '',
        is_delete: false,
      },
      formDateRules: {
        name: [{ required: true, message: '请输入表单项名称', trigger: ['blur', 'change'] }],
        type: [{ required: true, message: '请选择表单项类型', trigger: ['blur', 'change'] }],
        required: [{ required: true, message: '请选择是否必填', trigger: ['blur', 'change'] }],
      },
      is_update: false,
      currIndex: -1,
    };
  },
  methods: {
    addOrUpdate() {
      const storList = JSON.parse(localStorage.getItem('list') || '[]');
      if (storList.length > this.list.length) {
        this.list = [...storList];
      }
      this.$refs.formDateRef.validate((valid) => {
        if (valid) {
          if (this.is_update) {
            this.list.splice(this.currIndex, 1, { ...this.formDate });
            this.is_update = false;
          } else {
            this.list.push({ ...this.formDate });
          }
          this.$refs.formDateRef.resetFields();
          this.$emit('syncAdd', this.list);
        }
      });
      this.visible = false;
      this.$message.success('操作成功');
    },
    deleteItem(item) {
      const index = this.list.indexOf(item);
      this.list.splice(index, 1);
      this.$message.success('操作成功');
    },
    closeDialog() {
      this.visible = false;
      this.$refs.formDateRef.resetFields();
    },
    init(item) {
      this.visible = true;
      if (item !== undefined) {
        this.is_update = true;
        this.currIndex = this.list.indexOf(item);
        this.formDate = { ...item };
      }
    },
    createList(count, isTeam) {
      console.log(count, isTeam);
      this.list = [
        {
          name: isTeam ? '姓名' : '队长姓名',
          required: true,
          type: 0,
          value: '',
          is_delete: true,
        },
      ];
      if (count > 0 && !isTeam) {
        for (let i = 0; i < count - 1; i++) {
          const obj = {
            name: `${i + 1}号队员姓名`,
            required: true,
            type: 0,
            value: '',
            is_delete: true,
          };
          this.list.push({ ...obj });
        }
      }
      localStorage.setItem('list', JSON.stringify(this.list));
      return this.list;
    },
  },
};
</script>
